<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>

  <input type="text">

  <script>
    // 防抖 debounce  是一种策略
    //  事件触发了，延迟n秒后在执行回调，在n秒内如果该事件又触发了，则需要重新计时
    //  好处：对于频发触发的事件，不会频繁的执行回调，只会执行最后一次
    //  最常见使用场景： 输入框的输入内容（input事件频发触发）

    let timerId

    document.querySelector("input").oninput = function () {
      // 开启延时器之前，先清除上一次开启的延时器
      clearTimeout(timerId)

      timerId = setTimeout(() => {
        console.log(this.value);
      }, 300)
    }
  </script>
</body>

</html>